import classnames from 'classnames'

import Icon from '@/components/Icon'
import { useAction } from '@/hooks'
import styles from './index.module.scss'
// import { useAction } from '@/hooks'
import { AppDispatch } from '@/store'
import {
  addUserChannelListAction,
  delUserChannelListAction,
  getChannelListAction,
} from '@/store/actions/home'
import { setActive } from '@/store/modules/home'
import { Channel } from '@/types/data.d.'
import { getError } from '@/utils/Error'
import { Toast } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
type Props = {
  onClose: () => void
}
const Channels = ({ onClose }: Props) => {
  const { channelList, userChannel, active } = useAction(
    getChannelListAction,
    'home'
  )
  const dispatch = useDispatch<AppDispatch>()
  // 切换我的频道编辑状态
  const [isEdit, setIsEdit] = useState(false)
  const toggleActive = async (channel: Channel) => {
    // 不是编辑状态
    if (!isEdit) {
      // 点击频道高亮
      dispatch(setActive(channel.id))
      // 关闭弹层
      onClose()
    } else {
      // 是编辑状态
      // 1. 推荐频道不能删除
      // 2. 当前选中频道不能删除
      // 3. 至少要保留 4 个频道
      if (
        channel.id === 0 ||
        channel.id === active ||
        userChannel.length <= 4
      ) {
        return Toast.show({
          content: '不满足删除条件',
        })
      }

      try {
        // { id: 888, name: '' }
        await dispatch(delUserChannelListAction(channel))
        Toast.show({
          icon: 'success',
          content: '删除频道成功',
        })
      } catch (error) {
        getError(error)
      }
    }
  }
  const addChannel = (channel: Channel) => {
    dispatch(addUserChannelListAction(channel))
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon icon="iconbtn_channel_close" onClick={() => onClose()} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span
              onClick={() => {
                setIsEdit(!isEdit)
              }}
              className="channel-item-edit">
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannel.map((item) => (
              <span
                onClick={() => toggleActive(item)}
                className={classnames('channel-list-item', {
                  selected: active === item.id,
                })}
                key={item.id}>
                {item.name}
                <Icon icon="iconbtn_tag_close" />
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {channelList.map((item) => (
              <span
                className={'channel-list-item'}
                key={item.id}
                onClick={() => addChannel(item)}>
                <Icon icon="iconbtn_mycollect " className="list-icon" />
                <span>{item.name}</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
